<template>
  <view class="c-checkbox">
    <view
      class="checkbox-box"
      :class="ggclass"
      :style="{ width: $rpxunit(size), height: $rpxunit(size) }"
    >
      <view
        class="checkbox"
        @click="isPitch = !isPitch"
        :style="{ background: isPitch ? colors : '' }"
        :class="{ pitch: isPitch }"
      >
      </view>
    </view>
    <slot></slot>
  </view>
</template>

<script setup lang="ts">
import {
  defineProps,
  computed,
  getCurrentInstance,
  unref,
  toRefs,
  reactive,
} from "vue";
import propsMixin from "../mixins/props/index";
let { proxy } = getCurrentInstance() as any;
let $rpxunit = proxy.$rpxunit;
let props = defineProps({
  ...propsMixin.props,
  modelValue: {
    type: Boolean,
    default: false,
  },
  size: {
    type: [String, Number],
    default: "",
  },
});

let isPitch = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    proxy.$emit("update:modelValue", val);
    proxy.$emit("change", val);
  },
});
let colors = computed(() => {
  return props.color || proxy.$color.main;
});
</script>

<style lang="scss" scoped>
.c-checkbox{
	display: flex;
	align-items: center;
	font-size: 24rpx;
}
.checkbox-box {
  display: flex;
  align-items: center;
  
  width: 35rpx;
  height: 35rpx;
  margin-right: 10rpx;
  .checkbox {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1rpx solid #999;
  }
}

.pitch {
  border: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  &::before {
    content: "";
    display: inline-block;
    margin-top: calc(-100% * 0.1);
    width: calc(100% * 0.4);
    height: calc(100% * 0.2);
    border-left: 4rpx solid #fff;
    border-bottom: 4rpx solid #fff;
    transform: rotate(-45deg);
  }
}
</style>